﻿@model IEnumerable<FaWorks.WebSite.Models.SitemapItem>
@{
    ViewBag.Title = "站点地图";
}

<!-- Menu -->
<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">@(ViewBag.Title)列表</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#" onclick="view.New()">新增根站点</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">更多操作 <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">删除</a></li>
          <li class="divider"></li>
          <li><a href="#">打印</a></li>
          <li><a href="#">导出</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>
<!-- List -->
<table class="table table-hover table-condensed">
    <colgroup>
        <col class="col-xs-1" />
        <col class="col-xs-1" />
        <col class="col-xs-2" />
        <col class="col-xs-7" />
        <col class="col-xs-1" />
    </colgroup>
    <thead>
        <tr>
            <th></th>
            <th>图标</th>
            <th>名称</th>
            <th>路径</th>
            <th>排序</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model) {
            <tr data-ID="@item.ID" ondblclick="view.Record.Edit('@(item.ID)')">
                <td>
                    <a href="#" title="Add Child" onclick="view.Record.AddChild('@(item.ID)')"><i class="icon-plus"></i></a>
                    <a href="#" title="Edit" onclick="view.Record.Edit('@(item.ID)')"><i class="icon-edit"></i></a>
                    <a href="#" title="Delete" onclick="view.Record.Del('@(item.ID)')"><i class="icon-remove"></i></a>
                </td>
                <td>
                    <i class="@item.Icon"></i>
                </td>
                <td>
                    @item.Name
                </td>
                <td>
                    @item.Location
                </td>
                <td>
                    @item.Index
                </td>
            </tr>
        }
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5">
                <ul class="pagination pull-right">
                    <li class="disabled"><span>&laquo;</span></li>
                    <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
                    <li><span>&raquo;</span></li>
                </ul>
            </td>
        </tr>
    </tfoot>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">站点地图项</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="inputPassword" class="col-md-2 control-label">图标</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" id="iptIcon" placeholder="Icon Class">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword" class="col-md-2 control-label">名称</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" id="iptName" placeholder="Name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword" class="col-md-2 control-label">路径</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" id="iptLocation" placeholder="Url">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword" class="col-md-2 control-label">排序</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" id="iptIndex" placeholder="Order">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="btnSave">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

@section Scripts {
    <script type="text/javascript">
        var view = (function () {
            return {
                New: function () {
                    $('#myModal').modal('show');
                    $('#btnSave').one('click', function () {
                        var model = new Model();
                        model.Icon = $('#iptIcon').val();
                        model.Name = $('#iptName').val();
                        model.Location = $('#iptLocation').val();
                        model.Index = $('#iptIndex').val();

                        $.post('/SiteMap/Create', model, function () {
                            window.location.reload();
                        });
                    });
                },
                Record: {
                    AddChild: function (pid) {
                        $('#myModal').modal('show');
                        $('#btnSave').one('click', function () {
                            var model = new Model();
                            model.Icon = $('#iptIcon').val();
                            model.Name = $('#iptName').val();
                            model.Location = $('#iptLocation').val();
                            model.Index = $('#iptIndex').val();

                            $.post('/SiteMap/Create?PID=' + pid, model, function () {
                                window.location.reload();
                            });
                        });
                    },
                    Edit: function (id) {
                        $.getJSON('/SiteMap/Edit', { "ID": id }, function (model) {
                            $('#iptIcon').val(model.Icon);
                            $('#iptName').val(model.Name);
                            $('#iptLocation').val(model.Location);
                            $('#iptIndex').val(model.Index);

                            $('#myModal').modal('show');
                            $('#btnSave').one('click', function () {
                                model.Icon = $('#iptIcon').val();
                                model.Name = $('#iptName').val();
                                model.Location = $('#iptLocation').val();
                                model.Index = $('#iptIndex').val();

                                $.post('/SiteMap/Edit', model, function () {
                                    window.location.reload();
                                });
                            });
                        });
                    },
                    Del: function (id) {
                        $.post('/SiteMap/Delete?ID=' + id, null, function () {
                            window.location.reload();
                        });
                    }
                }
            };
        })();

        var Model = function() {
            return {
                Icon: '',
                Name: '',
                Location: '',
                Index: 0,
                Childs: []
            }
        }

        $(window).load(function () {
            
        })
    </script>
}